<!DOCTYPE html>
<!--
 * MIT License

* Copyright (c) 2018.  Amazon Web Services, Inc. All Rights Reserved.

* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:

* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Amazon Neptune | Graph Visualization Demo</title>

    <style type="text/css">
        html, body {
            font: 10pt arial;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #mynetwork {
            width: 1000px;
            height: 750px;
            border: 1px solid lightgray;
        }
        #config {
            float:right;
            width: 400px;
            height: 600px;
        }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


    <script type="text/javascript" src="vis.js"></script>
    <link href="vis-network.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var PROXY_API_URL = "https://vr6cx4jz7i.execute-api.eu-west-1.amazonaws.com/test";
        // var nodes = null;
        var edges = null;
        var network = null;
        var resp =null;
        var options =null;

        var searchfill=null;

        var LENGTH_MAIN = 350,
            LENGTH_SERVER = 150,
            LENGTH_SUB = 50,
            WIDTH_SCALE = 2,
            GREEN = 'green',
            RED = '#C5000B',
            ORANGE = 'orange',
            //GRAY = '#666666',
            GRAY = 'gray',
            BLACK = '#2B1B17';



        $(document).ready(function(){

            console.log('Initializing the page..and loading the values in the Search LoV');
            $.get(PROXY_API_URL + "/initialize", function(data) {
                    console.log(data);
                    var js=JSON.parse(JSON.stringify(data))
                    searchfill=[];
                    for(i=0;i< js.length; i++)
                    {
                        searchfill.push(js[i].name);
                    }
                    console.log(searchfill);

                    $( "#users" ).autocomplete({
                        source:
                            function (request, response) {
                                var filteredArray = $.map(searchfill, function (item) {
                                    //console.log(item);
                                    if (item.startsWith(request.term)) {
                                        return item;
                                    }
                                    else {
                                        return null;
                                    }
                                });
                                response(filteredArray);
                            }
                    });

                }
            );

            <!-- called when user clicks on the Search button -->
            $( "#Go" ).click(function(event){
                var username = $("#users").val();
                var lastchar= username.substring(username.length-1, username.length);
                var nextletter= String.fromCharCode(lastchar.charCodeAt(0)+1);
                var touser = username.substring(0,username.length-1)
                touser = touser+nextletter;

                $.get(PROXY_API_URL + "/search?username="+username+"&touser="+touser, function(data) {
                    var resp = JSON.parse(JSON.stringify(data));
                    console.log(resp);
                    var x=0;
                    var y=0;
                    for(let i=0;i< resp.length;i++) {
                        try {
                            nodes.add({id:resp[i].id, label:resp[i].name[0], value:resp[i].label, color: 'red', font: {color:'white'}});
                        }
                        catch (e) { //if node is already added just continue
                            //throw e;
                            nodes.remove({id:resp[i].id });
                            nodes.add({id:resp[i].id, label:resp[i].name[0], value:resp[i].label, color: 'red', font: {color:'white'}});
                        }
                    }
                });

            });

            <!-- call to render the VIS.js canvas -->
            draw();

        });

        // Called when the Visualization API is loaded.
        function draw() {
            resp = "";
            console.log('Inside draw function to render graph elements (nodes/edges)...');

            // Create a data table with nodes.
            nodes = []; //this will be converted to an object below
            // Create a data table with links.
            edges = []; //this will be converted to an object below

            nodes = new vis.DataSet();
            //handle events on "nodes" object that is added to network
            //for e.g. add a node to the "nodes" object invokes this event
            nodes.on("*", function (event) {
                //document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
                //console.log('you just added on a node... :');
                //console.log(event);
            });

            edges = new vis.DataSet();
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };

            //options = { };

            options = {
                nodes: {
                    shape: 'box'
                }
            };

            network = new vis.Network(container, data, options);
            network.on("click", function (params) {
                params.event = "[original event]";
                console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
                console.log(this);
                var fromnode = this.getNodeAt(params.pointer.DOM);

                if (typeof nodes.get(fromnode).value != "undefined") {
                    console.log(nodes.get(fromnode).value);

                    callneptunegetneighbours(fromnode, nodes, edges);

                    callneptunegettweets(fromnode, nodes, edges);

                    if (nodes.get(fromnode).value == 'Tweet') {
                        console.log('getting user who like this tweet now............');
                        whichusersliketweet(fromnode, nodes, edges);
                    }
                }


            });
        }


        function whichusersliketweet(fromnode, nodes, edges)
        {
            console.log('inside whichusersliketweet');
            $.get(PROXY_API_URL + "/whichusersliketweet?tweetid="+fromnode, function(data) {
                console.log(data);
                var resp = JSON.parse(JSON.stringify(data));
                console.log(resp);
                for(let i=0;i< resp.length;i++) {
                    try {
                        nodes.add({id:resp[i].id, label:resp[i].name[0], value:resp[i].label});
                    }
                    catch (e) { //if node is already added just continue
                        console.log('clicked on the same node twice');
                    }
                }

                console.log('creating user-likes-tweet relations');

                for(let j=0;j< resp.length;j++)
                {
                    console.log('adding edges');
                    try{
                        edges.add({id: resp[j].id+''+fromnode, from: resp[j].id, to: fromnode, label:"likes",
                            color:{color:'rgba(229,77,159,0.78)', highlight:'rgba(229,77,159,0.78)', inherit: false},
                            arrows: {to: {enabled: true } }
                        });
                    } //add an edge
                    catch(e)
                    {
                        console.log('clicked on the same node twice');
                    }
                }
            });

        } //end of function

        function callneptunegettweets(fromnode, nodes, edges)
        {
            console.log('inside callneotunegettweets');
            $.get(PROXY_API_URL + "/getusertweets?userid="+fromnode, function(data) {
                console.log(data);
                var resp = JSON.parse(JSON.stringify(data));
                console.log(resp);
                for(let i=0;i< resp.length;i++) {
                    try {
                        nodes.add({id:resp[i].id, label:resp[i].text[0].substring(0, 50)+'...', value:resp[i].label, title: resp[i].text[0], color: 'grey'});
                    }
                    catch (e) { //if node is already added just continue
                        console.log('clicked on the same node twice');
                    }
                }

                console.log('creating user-tweets-tweet relations');

                for(let j=0;j< resp.length;j++)
                {
                    console.log('adding edges');
                    try{
                        edges.add({id: fromnode+''+resp[j].id, from: fromnode, to: resp[j].id, label:"tweets", color:{color:'grey'},  arrows: {to: {enabled: true } } });
                    } //add an edge
                    catch(e)
                    {
                        console.log('clicked on the same node twice');
                    }
                }
            });
        }

        function callneptunegetneighbours(fromnode, nodes, edges)
        {
            <!-- below code is without using jQuery -->
            var xhr = new XMLHttpRequest();
            var  resparr;
            const Http = new XMLHttpRequest();
            const url = PROXY_API_URL + '/neighbours?id='+fromnode;
            Http.open("GET", url);
            Http.send();
            Http.onreadystatechange = (e) =>
            {
                //console.log(Http.responseText);
                resp = Http.responseText;
                if (Http.readyState === 4) {
                    resparr = JSON.parse(resp);
                    console.log(resparr);
                    for(let i=0;i< resparr.length;i++) {
                        if(resparr[i].id != fromnode)
                        {
                            try {
                                nodes.add({id:resparr[i].id, label: resparr[i].name[0], value:resparr[i].label});
                            }
                            catch (e) { //if node is already added just continue
                                continue;
                            }
                        }
                    }

                    console.log('printing nodes');
                    console.log(nodes);

                    for(let j=0;j< resparr.length;j++)
                    {
                        console.log('adding edges');
                        try{
                            edges.add({id: fromnode+''+resparr[j].id, from: resparr[j].id, to: fromnode, label:"follows", arrows: {to: {enabled: true } }});
                        } //add an edge
                        catch(e)
                        {
                            console.log('clicked on the same node twice');
                        }
                    }
                }
            }
        }

    </script>

</head>

<body>
<h1>Visualize Twitter data in Amazon Neptune using VIS.js library</h1>
<div class="ui-widget">
    <label for="users">Find Users: </label>
    <input id="users">
    <input type="submit" id="Go" value="Go">
</div>

<div id="mynetwork" ></div>

</body></html>
